<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_迭代器(Iterator)-JavaScript中迭代器</title>
  <!-- 
  在JavaScript中，迭代器是一种用于访问集合（如数组、对象等）中元素的设计模式。迭代器提供了一种统一的方式来遍历数据结构，而不需要了解其底层实现。
  1. 迭代器的基本概念
  - 迭代器是一个对象，具有 `next()` 方法，该方法返回一个包含 `value` 和 `done` 属性的对象。
  -  `value` 表示当前的值， `done` 是一个布尔值，指示是否已遍历完所有元素。

  2. 创建迭代器
  可以通过实现一个包含 `next()` 方法的对象来创建自定义迭代器。例如：
  function createIterator(array) {
      let index = 0;
      return {
          next: function() {
              if (index < array.length) {
                  return { value: array[index++], done: false };
              } else {
                  return { done: true };
              }
          }
      };
  }

  const iterator = createIterator([1, 2, 3]);
  console.log(iterator.next()); // { value: 1, done: false }
  console.log(iterator.next()); // { value: 2, done: false }
  console.log(iterator.next()); // { value: 3, done: false }
  console.log(iterator.next()); // { done: true }
  3. 内置迭代器
  JavaScript中的许多内置对象（如数组、字符串、Map、Set等）都实现了迭代器。可以使用 `Symbol.iterator` 来访问这些对象的迭代器。
  const array = [1, 2, 3];
  const arrayIterator = array[Symbol.iterator]();

  console.log(arrayIterator.next()); // { value: 1, done: false }
  console.log(arrayIterator.next()); // { value: 2, done: false }
  console.log(arrayIterator.next()); // { value: 3, done: false }
  console.log(arrayIterator.next()); // { done: true }
  4. for...of 循环
  `for...of` 循环可以直接使用迭代器来遍历可迭代对象，简化了迭代的过程。
  const array = [1, 2, 3];
  for (const value of array) {
      console.log(value); // 输出 1, 2, 3
  }
  5. 生成器
  生成器是一种特殊类型的迭代器，通过 `function*` 语法定义，并使用 `yield` 关键字返回值。生成器可以暂停和恢复执行。
  function* generator() {
      yield 1;
      yield 2;
      yield 3;
  }

  const gen = generator();
  console.log(gen.next()); // { value: 1, done: false }
  console.log(gen.next()); // { value: 2, done: false }
  console.log(gen.next()); // { value: 3, done: false }
  console.log(gen.next()); // { done: true }
  6. 迭代器的应用
  迭代器在许多场景中都很有用，例如：
  - 自定义数据结构的遍历。
  - 实现惰性计算。
  - 与 `for...of` 循环、数组解构等结合使用。

  总结
  JavaScript中的迭代器提供了一种强大而灵活的方式来遍历数据结构。通过理解迭代器的工作原理和使用方法，可以更有效地处理集合数据。
  -->
</head>
<body>

  <script>
    const arr = [1, 2, 3, 4, 5];

    // 1. 创建一个迭代器对象
    const iterator = arr[Symbol.iterator]();

    // 2. 调用迭代器对象的next方法
    console.log(iterator.next()); // { value: 1, done: false }

    // 3. 对象创建
    const names = ['张三', '李四', '王五'];
    const namesIterator = {
      next: function () {
        this.index = this.index || 0;
        // done表示迭代器是否迭代完成
        // value表示每次迭代的结果
        if (this.index === names.length) {
          return { done: true };
        }
        return { 
          value: names[this.index++], 
          done: false
        }
      }
    }

    console.log(namesIterator.next());
    console.log(namesIterator.next());
    console.log(namesIterator.next());
    console.log(namesIterator.next());
    console.log(namesIterator.next());
    console.log(namesIterator.next());


    

  </script>
  
</body>
</html>